<script setup lang="ts">
import {ref,onMounted,reactive} from "vue";
import axios from "@/utils/axios";
import type { FormInstance } from 'element-plus'
import type {FormRules} from "element-plus";

// 添加表单引用
const addFormRef = ref<FormInstance>();
// 定义验证规则
const addFormRules = reactive<FormRules>({
  tagName: [
    { required: true, message: '请输入标签名称', trigger: 'blur' },
    { min: 1, max: 50, message: '标签名称长度应在1-50个字符之间', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择标签类型', trigger: 'change' }
  ]
});

const data = reactive({
  tableData:[],
  add_form:{
    tagName:'',
    type:1
  },
  showAdd:false,
  showEdit:false,
  page:1,
  size:10,
  total:0
});

const init = async () => {
  try {
    const res = await axios.get('/admin/tagPage?page='+data.page+'&size='+data.size);
    data.tableData = res.data.records;
    data.total = res.data.total;
    console.log(res);
  }catch (e) {
    console.error(e);
  }
};

const add = async () => {
  try {
    console.log(data.add_form);
    await axios.post('/admin/tagAdd',data.add_form);
    data.showAdd = false;
    await init();
  }catch (e) {
    console.error(e);
  }
};

const del = async (row:any) => {
  try {
    await axios.delete('/admin/delTag?tagId='+row.id);
    await init();
  }catch (e) {
    console.error(e);
  }
};

const jump = async (page:number) => {
  data.page = page;
  await init();
};

onMounted(()=>{
  init();
});
</script>

<template>
  <el-button type="primary" @click="data.showAdd = true">添加</el-button>
  <el-table :data="data.tableData">
    <el-table-column label="ID" prop="id">
    </el-table-column>
    <el-table-column label="标签名称" prop="tagName">
    </el-table-column>
    <el-table-column label="标签类型" prop="type">
      <template #default="scope">
        {{ scope.row.type === 1 ? '帖子标签' : scope.row.type === 2 ? '偏好标签' : '' }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @current-change="jump"
      :current-page="data.page"
      :page-size="data.size"
      layout="total, prev, pager, next"
      :total="data.total">
  </el-pagination>
  <el-dialog title="添加标签" v-model="data.showAdd" @close="addFormRef?.resetFields()">
    <el-form
        ref="addFormRef"
        :model="data.add_form"
        :rules="addFormRules"
        label-width="80px">
      <el-form-item label="标签名称" prop="tagName">
        <el-input v-model="data.add_form.tagName" placeholder="请输入标签名称"></el-input>
      </el-form-item>
      <el-form-item label="标签类型" prop="type">
        <el-select v-model="data.add_form.type" placeholder="请选择标签类型">
          <el-option label="帖子标签" :value="1"></el-option>
          <el-option label="偏好标签" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
</style>
